<template>
  <div style="padding:20px" class="totalThreat">
    <el-row :gutter="20">
      <el-col :span="8" v-for='it in toplist'>
        <div class="eachItem">
          <div class="lineItem">
            <div class="left">
              <img :src="it.img" alt="" style="height:111px;margin-left:40px;vertical-align:middle" />
            </div>
            <div class="right" style="margin-left:20px;margin-top:20px">
              <div class="top" style="font-size:20px">{{it.topNum}} <span style="font-size:16px;color:gray">{{it.topText}}</span></div>
              <div class="bottom" style="margin-top:10px">
                <!-- <img :src="it.isAdd? require('../asset/u1553.svg'):require('../asset/u1562.svg')" alt=""> 10% <span style="font-size:16px;color:gray">{{it.botText}} </span> -->
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:10px">
      <el-col :span='8'>
        <div style="padding:10px; border:1px solid #ebebeb;background:#fff">
          <div style="font-weight:900;font-size:22;border-bottom:1px solid #ebebeb;padding-bottom:5px">实验设备使用情况</div>
          <div style="height:360px;margin-top:10px">
            <div style="display:flex;margin-bottom:15px;color:grey">
              <div style="width:60px">序号</div>
              <div style="flex:1">设备</div>
              <div style="flex:3">占比</div>
              <div style="flex:1">总数量</div>
            </div>
            <div v-for="(it, index) in attackList" :key="index" style="display:flex;margin-bottom:15px">
              <div style="width:60px">
                <span :style="{ color: index >0 ?color[0] :'black', fontWeight:index<3?'700':'0'}">
                  {{ index + 1  <10 ? 0 + '' +(index +1):index +1}}
                </span>
              </div>
              <div style="flex:1">{{ it.label }}</div>
              <div style="flex:3"><span style="margin-right:10px">{{ it.amount }}%</span>
                <el-progress :percentage="it.amount" :color='color[0]' :format="()=>{}" style="display:inline"></el-progress>
              </div>
              <div style="flex:1">{{it.amount}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <el-calendar v-model="value" class="calendarItem">
          <template slot="dateCell" slot-scope="{ data}">
            <p style="margin:0px">
              <!-- 没有当前日期，不需要悬浮， -->
            <div>{{ data.day.split('-').slice(2).join() }}<br />
              <div v-if="dayTime.map(i => i.date).includes(data.day)" stylt=''>
                <div>{{data.day}}</div>
                <div>{{dayTime.find(it => it.date == data.day).content[0].name}}</div>
              </div>
            </div>
            </p>
          </template>
        </el-calendar>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "testHome",
  data() {
    return {
      toplist: [
        {
        //   img: require('../asset/u1556.svg'),
          topNum: '323项',
          topText: '实验用于论文',
          botPer: '10%',
          isAdd: true,
          botText: '同比去年'
        },
        {
        //   img: require('../asset/u1565.svg'),
          topNum: '323项',
          topText: '实验用于项目',
          botPer: '10%',
          isAdd: false,
          botText: '同比去年'
        },
        {
        //   img: require('../asset/u1597.svg'),
          topNum: '323项',
          topText: '今日总服务量',
          botPer: '10%',
          isAdd: true,
          botText: '同比去年'
        },
      ],
      color: ['#4393FF', '#1CCAB8'],
      attackList: [
        { label: "bb", amount: 60 },
        { label: "xx", amount: 70 },
        { label: "vv", amount: 99 },
        { label: "aa", amount: 67 },
        { label: "cc", amount: 34 },
      ],
      dayTime: [
        {
          date: "2022-06-02", img: '/img/star.svg', content: [{
            name: '会议1',
            room: '301',
            time: '2022-04-28'
          }]
        },
        {
          date: "2022-06-28", img: '/img/star.svg', content: [{
            name: '会议1',
            room: '301',
            time: '2022-04-28'
          },
          {
            name: '会议1',
            room: '301',
            time: '2022-04-28'
          }]
        }, {
          date: "2022-04-02", img: '/img/star.svg', content: [{
            name: '会议11',
            room: '305',
            time: '2022-04-02'
          }]
        }, {
          date: "2022-04-16", img: '/img/yuan.svg', content: [{
            name: '会议13',
            room: '308',
            time: '2022-04-16'
          }]
        }],
      value: new Date(),
    }
  }
};
</script>
<style lang='less' scoped>
.eachItem {
  border: 1px solid #ebebeb;
  background: #fff;
  padding: 2px;
  height: 221px;
  .lineItem {
    display: flex;
    margin-top: 52px;
  }
}
.totalThreat /deep/ .el-progress-bar__outer  {
  border-radius: 0;
  background-color: transparent;
}

.totalThreat /deep/ .el-progress-bar__inner  {
  border-radius: 0;
}

/deep/ .el-calendar-table td.is-today {
  background: #facd91;
  color: black;
}
/deep/ .el-calendar-table td.is-selected {
  // background: transparent;
  // background-color: transparent;
}
/deep/ .el-calendar-table .el-calendar-day:hover {
  border: 1px solid #aaa;
  background: transparent;
}
// /deep/ .el-calendar__button-group{
//   display: none;
// }
/deep/ .el-calendar {
  position: relative;
}
/deep/.el-calendar__header .el-calendar__title {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  font-size: 20px;
  color: #4e8cda;
}
/deep/.el-calendar__button-group {
  width: 100%;
}
/deep/ .el-button-group {
  display: flex;
  justify-content: space-between;
}
/deep/.el-button-group::after,
/deep/.el-button-group::before {
  content: unset;
}

/deep/ .el-button-group > .el-button:not(:first-child):not(:last-child) {
  // display: none;
  position: absolute;
  right: 35%;
  top: 21px;
}

/deep/.el-button-group > .el-button:first-child:before {
  content: "<";
  font-size: 22px;
}
/deep/ .el-button-group > .el-button:not(:last-child) {
  border: none;
  margin-left: 2%;
}
/deep/ .el-button-group > .el-button:last-child {
  border: none;
  margin-right: 2%;
}
/deep/ .el-button-group > .el-button:last-child:before {
  content: ">";
  font-size: 22px;
  border: none;
}

/deep/.el-button-group > .el-button:first-child span,
/deep/.el-button-group > .el-button:last-child span {
  display: none;
}
</style>
